<template>
  <div>
    <h1>{{ state.search }}</h1>
    <button @click="handleSearch">改变查询字段</button>
  </div>
</template>
<script>
import {reactive, watch} from 'vue'
export default{
  setup(){
    let state = reactive({
      search: Date.now() //初始化search为当前时间戳
    })
    //声明watch方法，监听search变量的变化
    watch(() => {
      return state.search
    }, (nextData, preData) => {
      //打印改变前和改变后的数据
      console.log('preData', preData)
      console.log('nextData', nextData)
    })
    //修改search变量为当前时间戳
    const handleSearch = () => {
      state.search = Date.now()
    }
    return {
      state,
      handleSearch
    }
  }
}
</script>